<template>
    <sky-base-page ref="skyBasePageRef" :api-obj="qly.api.user.user.userinfo" type="data" btnPadding="0"
                   refresherEnabled bg-page-color="#f5f5f5">
        <template #default="{dataInfo}">
            <view class="user-card" v-if="dataInfo.id">
                <view class="user-info">
                    <up-avatar :src="dataInfo.avatar" size="60"></up-avatar>
                    <view class="info">
                        <view class="name">{{ dataInfo.nickname }}</view>
                        <view class="phone">{{ dataInfo.mobile }}</view>
                    </view>
                </view>
            </view>
            <view class="user-card" v-else @tap="toLogin">
                <view class="user-info">
                    <up-avatar :src="dataInfo?.avatar" size="60"></up-avatar>
                    <view class="info">
                        <view class="name">点击登录</view>
                    </view>
                </view>
            </view>
            <view class="money-grid">
                <view class="grid-item">
                    <view class="money">￥123.00</view>
                    <view class="title">我的钱包(元)</view>
                </view>
                <view class="grid-item">
                    <view class="money">￥123.00</view>
                    <view class="title">可提现(元)</view>
                </view>
                <view class="grid-item">
                    <view class="money">￥123.00</view>
                    <view class="title">积分</view>
                </view>
            </view>
            
            <menu-card title="线上订单" :deliveryMethod="2" source="order" :data-list="onlineData">
                <template #right>
                    <view class="more-box">
                        <text class="text">全部订单</text>
                        <up-icon name="arrow-right" color="#909193"></up-icon>
                    </view>
                </template>
            </menu-card>
            <menu-card title="自提订单" :deliveryMethod="1" source="order" :data-list="offlineData">
                <template #right>
                    <view class="more-box">
                        <text class="text">全部订单</text>
                        <up-icon name="arrow-right" color="#909193"></up-icon>
                    </view>
                </template>
            </menu-card>
            <menu-card title="常用功能" :data-list="commonlyData"/>
        </template>
    
    </sky-base-page>
</template>
<script setup>
import menuCard from './components/menuCard.vue'

const onlineData = computed(() => {
    return [{
        label: '待付款',
        value: '1'
    }, {
        label: '待发货',
        value: '2'
    }, {
        label: '待收货',
        value: '3'
    }, {
        label: '已完成',
        value: '5'
    }, {
        label: '已取消',
        value: '6'
    }, {
        label: '待退款售后',
        value: '7'
    },]
})
const offlineData = computed(() => {
    return [{
        label: '待付款',
        value: '1'
    }, {
        label: '待自提',
        value: '4'
    }, {
        label: '已完成',
        value: '5'
    }, {
        label: '已取消',
        value: '6'
    }, {
        label: '待退款售后',
        value: '7'
    },]
})
const commonlyData = computed(() => {
    return [{
        label: '我的收藏',
        value: '1'
    }, {
        label: '我的地址',
        value: '1',
        router: '/pages/my/address/index'
    }, {
        label: "我的动态",
        value: '1'
    }, {
        label: '我的分享',
        value: '1'
    }, {
        label: '自提点',
        value: '1',
        router: '/pages/my/point/index'
    },]
})
const toLogin = () => {
    qly.page.open('/pages/my/login/index')
}
</script>

<style scoped lang="scss">
.user-card {
    background: #fff;
    padding: 32rpx 48rpx;
    
    .user-info {
        display: flex;
        align-items: center;
        gap: 18rpx;
    }
}

.money-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12rpx;
    background-color: #fff;
    padding: 0 32rpx 32rpx;
    
    .grid-item {
        text-align: center;
        
        .money {
            font-weight: bold;
            font-size: 32rpx;
            color: #303133;
            margin-bottom: 8rpx;
        }
        
        .title {
            font-size: 28rpx;
            color: #303133;
        }
    }
}

.more-box {
    display: flex;
    align-items: center;
    gap: 8rpx;
    
    .text {
        font-size: 28rpx;
        color: #909193;
    }
}
</style>
